import React, { createRef } from "react"
// 非受控的表单控制

// 非受控: 不走react自身的状态 直接通过操作原生的dom进行数据的获取修改

// 实现方式
// 1. 调用一个固定的方法 createRef(null) 生成一个对象 myRef=  { current: 初始值null}
// 2. 通过一个固定的属性 ref 把第一步生成的对象绑定  ref={this.myRef}
// 3. 通过this.myRef.current -> dom元素  直接通过原生的dom操作去修改和获取即可

class InputComponent extends React.Component {
  myRef = createRef(null)

  getValue = () => {
    // 通过myRef获取输入框的值
    console.log(this.myRef.current.value)
  }
  render () {
    return (
      <div>
        <input
          type="text"
          ref={this.myRef}
        />
        <button onClick={this.getValue}>获取输入框的值</button>
      </div >
    )
  }
}

function App () {
  return <div><InputComponent /></div>
}


export default App